<template>
     <!-- start 搜索 -->
    <section class="search-group">

      <!-- start  搜索header -->
      <div class="search-header">
        <div class="header-left">
          <el-input v-model="searchModel.key" :placeholder="inputPlaceholder">
            <i slot="prefix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <base-button type="primary" @event="searchHandle">搜索</base-button>
          <base-button type="ghost" @event="resetHandle">重置</base-button>
        </div>
      
        <el-button type="text" @click="panelSearchAdvancedToggle">
          <i class="iconfont icon-add"></i>
          高级搜索
        </el-button>
      </div>
      <!-- end 搜索 header -->

      
      <!-- start 高级搜索表单 -->
      <product-template-search-panel
        :config="{
          fields: this.productFields,
        }"
        ref="searchPanel"
      >
        <div class="advanced-search-btn-group" slot="footer">
          <base-button type="ghost" @event="resetHandle">重置</base-button>
          <base-button type="primary" @event="powerfulSearch">搜索</base-button>
        </div>
      </product-template-search-panel>
      <!-- end 高级搜索表单 -->
    </section>
    <!-- end 搜索 -->
</template>
<script>
import SearchPanel from '../SearchPanel.vue';

export default {
  name: 'search-component',
  props: {
    // initData: {
    //   type: Object,
    //   default: () => ({})
    // },
    msgTitleList:{
      type:Array,
      require:true
    },

    productFields:{
      type:Array,
      require:true
    },

    inputPlaceholder:{
      type:String,
      default:'请输入手机号或关联编号'
    }
  },
  data() {
    return {
      searchModel: {
        key: '',
      },
      
    }
  },

  methods: {
    // 搜索按钮点击事件
    searchHandle(){
      this.$emit('search',this.searchModel)
    },

    // 重置
    resetHandle() {
      this.searchModel = {
        key: '',
      };
      this.$refs.searchPanel.resetParams();
      this.$refs.searchPanel.close()
      this.$emit('reset',this.searchModel);
    },

    // 高级搜索按钮点击事件
    panelSearchAdvancedToggle() {
      this.$refs.searchPanel.open();
      // this.$nextTick(() => {
      //   let forms = document.getElementsByClassName('advanced-search-form');
      //   for (let i = 0; i < forms.length; i++) {
      //     let form = forms[i];
      //     form.setAttribute('novalidate', true);
      //   }
      // });
    },
    /**
     * @description 全量搜索
     */
    powerfulSearch() {
      let buildParams = this.$refs.searchPanel.buildParams();
      this.$refs.searchPanel.close()
      this.searchModel = { ...this.searchModel,...buildParams }
      this.$emit('search',this.searchModel);
    },
  },
  components: {
    [SearchPanel.name]: SearchPanel,
  }
};
</script>
<style lang="scss" scoped>

.search-group{
    .search-header{
      display: flex;
      justify-content:space-between;
      background: #fff;
      border-radius: 3px;
      padding: 12px 10px;
      .header-left{
        width:440px;
        display: flex;
        justify-content: space-between;
        .el-input{
          width:300px;
          ::v-deep input{
            height:34px;
            line-height:34px;
          }
        }
      }
      ::v-deep .el-button{
        line-height: 32px;
        height:32px;
        padding:0 13px;
        border:0;
        .iconfont{
          font-size:12px;
          font-weight: bolder;
        }
      }
    } 
}
</style>